<template>
    <div>
        <el-row class="row-with-margin">
            <el-col :span="24">
                <div>
                    <el-button type="primary" @click="addCarVisible = true">新增</el-button>
                    <el-button>批量操作</el-button>
                    <el-button>导出</el-button>
                    <el-button>导入</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row class="row-with-margin" style="margin-top: 0px;margin-bottom: 0px;">
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="司机：">
                        <el-input placeholder="请输入关键词搜索" style="width: 200px; margin-left: 10px;"
                            v-model="param.driver"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryBtn">查询</el-button>
                        <el-button style="margin-left: 10px;" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <div>
                    <el-table :data="tableData" style="width: 100%; margin-top: 20px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="driver" label="司机"></el-table-column>
                        <el-table-column prop="licensePlate" label="车牌号"> </el-table-column>
                        <el-table-column prop="carType" label="车型"></el-table-column>
                        <el-table-column prop="carLength" label="车长"></el-table-column>
                        <el-table-column prop="capacity" label="核定载客"></el-table-column>
                        <el-table-column prop="volume" label="核载体积(m²)"></el-table-column>
                        <el-table-column prop="weight" label="核载重量(kg³)"></el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="scope">
                                <span :style="{ color: scope.row.status == 1 ? 'green' : 'red' }">
                                    {{ scope.row.status == 1 ? '启用' : '停用' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium"
                                    :disabled="scope.row.driver != null || scope.row.status == 0"
                                    @click="updateDriverBtn(scope.row)">绑定司机</el-button>
                                <el-button type="text" size="medium"
                                @click="unBindDriver(scope.row)">解绑司机</el-button>
                                <el-button type="text" size="medium" :disabled="scope.row.status == 0"
                                    @click="updateStatus(scope.row, 1)">停用车辆</el-button>
                                <el-button type="text" size="medium" :disabled="scope.row.status == 1"
                                    @click="updateStatus(scope.row, 0)">启用车辆</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" :current-page="pageNum"
                    :total="total" layout="total,sizes,prev, pager, next,jumper" @next-click="nextPage"
                    @prev-click="prevPage" @current-change="changePage" @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>



        <!--        //新增弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增司机" :visible.sync="addCarVisible">
            <el-form>
                <el-form-item label="车牌号" label-width="150px">
                    <el-input v-model="addCar.licensePlate"></el-input>
                </el-form-item>

                <el-form-item label="车型" label-width="150px">
                    <el-select filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                        v-model="addCar.carType">
                        <el-option v-for="carType in carTypes" :key="carType.value" :label="carType.label"
                            :value="carType.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCarVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCarBtn">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //新增弹框结束----------------------------------------------------------------------------------------------------->

        <!--        //绑定司机弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="绑定司机" :visible.sync="updateDriverVisible">
            <el-form>
                <el-form-item label="选择司机" label-width="150px">
                    <el-select filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                        v-model="updateDriver.driverId">
                        <el-option v-for="driver in drivers" :key="driver.driverId" :label="driver.driver"
                            :value="driver.driverId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateDriverVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUpdateDriver">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //绑定司机弹框结束----------------------------------------------------------------------------------------------------->
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [],//表格对象
            multipleSelection: [],
            param: {},
            addCarVisible: false,
            addCar: {},
            updateDriverVisible:false,
            updateDriver:{},
            carTypes: [{ value: '1', label: '小面' }, { value: '2', label: '中面' }, { value: '3', label: '长途大车' }],
            drivers:[],
        }
    },

    methods: {
        nextPage(val) {//当前页
            //下一页
            this.pageNum = val
            this.queryAllCar()
        },
        prevPage(val) {//当前页
            //上一页
            this.pageNum = val
            this.queryAllCar()
        },
        changePage(val) {
            //跳转页
            this.pageNum = val
            this.queryAllCar()
        },
        sizeChange(val) {
            //改变每页条数
            this.pageNum = 1
            this.pageSize = val
            this.queryAllCar()
        },
        // ---------------------------------------------分页方法分割线--------------------------------------------------------
        handleSelectionChange(val) {//点击批量删除复选框调用此方法
            this.multipleSelection = val
        },
        queryBtn() {//点击查询按钮调用该方法
            this.pageNum = 1
            this.queryAllCar()
        },
        resetForm() { //重置按钮调用方法
            this.param = { driver: '' }
            this.queryAllCar()
        },
        queryAllCar() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/car/queryAllCar', pageParam)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        addCarBtn() {
            this.$axios.post('api/car/addDriverBtn', this.addCar)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.addCarVisible = false
                        this.$message({
                            message: '车辆添加成功!!!!',
                            type: 'success'
                        });
                        this.queryAllCar()
                        this.addCar = {}
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateStatus(val, status) {
            const targetStatus = status;

            const message = targetStatus == 0 ? '是否启用该车辆' : '是否停用该车辆';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求

                this.$axios.post('api/car/updateStatus', val)
                    .then(resp => {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            this.$message.success(targetStatus == 0 ? '启用成功' : '停用成功');
                            this.queryBtn();
                        }
                        if (resp.data.code === 2015) {
                            this.$message({
                                message: '请解绑司机后再停用车辆',
                                type: 'error'
                            });
                        }

                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        updateDriverBtn(val){
            this.updateDriver = JSON.parse(JSON.stringify(val));
            this.updateDriverVisible = true

        },
        saveUpdateDriver(){
            this.$axios.post('api/car/saveUpdateDriver', this.updateDriver)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.updateDriverVisible = false
                        this.$message({
                            message: '绑定成功!!!!',
                            type: 'success'
                        });
                        this.queryAllCar()
                    }
                    if (resp.data.code === 2015) {
                        this.$message({
                            message: '绑定司机的驾照类型与车型不匹配!!!!',
                            type: 'error'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        unBindDriver(val){
            this.$confirm('是否确认要取消合单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求
                this.$axios.post('api/car/unBindDriver', val)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.$message({
                            message: '解绑成功!!!!',
                            type: 'success'
                        });
                        this.queryAllCar()
                    }
                    if (resp.data.code === 2015) {
                        this.$message({
                            message: '绑定的司机和车辆正在运输中!!!!',
                            type: 'error'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        
        queryAllDriver(){
            this.$axios.post('api/car/queryAllDriver')
                    .then(resp => {
                        console.log(resp.data);
                        this.drivers = resp.data.data
                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
        }
    },
    created() {
        this.queryAllCar()
        this.queryAllDriver()
    }
}
</script>

<style scoped>
.row-with-margin {
    margin-bottom: 20px;
    /* 根据需要调整间隙大小 */
}
</style>